{include="header"}
{include="navigator"}

{if="$default_height != 20"}
<style>
.list .node span{
	height:{$default_height}px;
}
.list .node span img.image{
	height:{$default_height}px;
}
.list li.node {
	height:{$default_height+6}px;
}
</style>
{/if}

<ul class = "table-menu">
	{loop="table_menu"}
		<li><a href = "{$url}admin/{$dsfm_module}/{$value.link}"><img src="images/{$value.icon}">{$key}</a></li>
	{/loop}
	{if="$dsfm_open_search==true"}
		<li class = "fr">{include="search"}</li>
	{/if}
	{if="$dsfm_open_filter==true"}
		<li class = "fr">{include="filter"}</li>
	{/if}
	{if="$dsfm_open_category==true"}
		<li class = "fr">{include="category"}</li>
	{/if}
</ul>

<ol class = 'list {if="$sortable==true"}sortable{/if}'>
	<li class = 'title'>
	{loop="title"}
		<span class = 'w{$value.width} {$value.hidden}'>
			{$value1.title}
		</span>
	{/loop}
	</li>
	{loop="row"}

	<li class = 'node {if="$sortable==true"}ui-state-default{/if}' {if="$sortable==true"}order='{$value[$sort_field]}'{/if}>
		{loop="title"}
			<span class = 'w{$value2.width} alt{$counter1%2} {$value2.hidden}'{if="$value2.style != ''"} style = "{$value2.style};"{/if}>{$value1[$value2[key]]}</span>
		{/loop}

		<span class = 'tool alt{$counter1%2}'>
		{loop="tool"}
			<a href = "{$value2[$counter1][link]}" alt = "{$value2[$counter1][tool]}" title = "{$value2[$counter1][tool]}" {if="$value2[$counter1][tool]==delete"}class = "delete"{/if}><img src = '{$value2[$counter1][icon]}'></a>
		{/loop}
		</span>
	</li>
	{/loop}
</ol>

{if="$sortable==true"}
<input type = "button" value = "Update" class = "btn" id = "btn-sort">
{/if}

<ul class = 'page'>
	<li class = 'text'>Page : </li>
	{loop="page"}
		<li class = 'number {$value.active}'>
			<a href = '?dsfm_page={$value.page}{$dsfm_filter_link}{$dsfm_search_link}'>{$value.page}</a>
		</li>
	{/loop}
</ul>

<script language = "javascript">
	$(document).ready(function() {
		$(".img-popup").fancybox();

		$(".delete").click(function() {
			if(confirm('Please confirm DELETE this item.')){
				return true;
			}else{
				return false;
			}
		});
	});
</script>

{if="$sortable == true"}
<style>
	.sortable {width: {$sort_width}px;}
	.ui-state-default {border:none; color:#000; font-weight:normal;}
	.ui-state-default a {color:#000 !important;}
</style>
<script language = "javascript">
	$(document).ready(function() {

		$("#btn-sort").click(function(){
			var params = "p=";

			$(".sortable .node").each(function( i, val ) {
				params += $(val).attr("order")+",";
			});

			$.ajax({
				type: 'POST',
				url: "{$sort_file}",
				data: params,
				error:function(){
					alert("Error!");
				},
				success:function(data){
					alert(data);
				}
			});
		});

		$( ".sortable" ).sortable({
			placeholder: "ui-state-highlight"
		});
	});
</script>
{/if}

{include="footer"}